
@mixin tag-theme($color, $background) {
  $active-background: darken($background, 10%);
  
  background-color: $background;
  color: $color;
  
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    
    &:focus,
    &.focus {
      background-color: $background;
    }
    &:hover {
      background-color: $background;
    }

    .ui-icon {
      cursor: not-allowed;
    }
  }
}

@mixin tag-size($height, $padding, $font-size, $border-radius) {
  padding: $padding;
  font-size: $font-size;
  height: $height - 2;
  line-height: $height - 2;

  &.radius {
    border-radius: $border-radius;
  }
  
  &.round {
    border-radius: 1000px;
  }

  .ui-icon + span,
  span + .ui-icon {
    cursor: pointer;
    margin-left: $height / 10;
  }
}

.ui-tag {
  @include tag-size($base-height, 0 10px, $base-fontSize, $base-radius);
  display: inline-block;
  transition: all .3s cubic-bezier(.78, .14, .15, .86);
  vertical-align: middle;
  overflow: hidden;

  /* disabled Tag */
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    opacity: .65;
    box-shadow: none;
  }

  /* Tag sizes */
  &.size-xl {
    @include tag-size($base-height-xl, 0 14px, $base-fontSize-xl, $base-radius-xl);
  }
  &.size-lg {
    @include tag-size($base-height-lg, 0 12px, $base-fontSize-lg, $base-radius-lg);
  }
  &.size-sm {
    @include tag-size($base-height-sm, 0 8px, $base-fontSize-sm, $base-radius-sm);
  }
  &.size-xs {
    @include tag-size($base-height-xs, 0 4px, $base-fontSize-xs, $base-radius-xs);
  }

  /* Tag themes */
  &.theme-default {
    @include tag-theme($base-tag-default-color, $base-tag-default-bg);
  }
  &.theme-info {
    @include tag-theme($base-tag-info-color, $base-tag-info-bg);
  }
  &.theme-success {
    @include tag-theme($base-tag-success-color, $base-tag-success-bg);
  }
  &.theme-warning {
    @include tag-theme($base-tag-warning-color, $base-tag-warning-bg);
  }
  &.theme-error {
    @include tag-theme($base-tag-error-color, $base-tag-error-bg);
  }
}